import request from "../../../utils/request"
// 导入npm 订阅者
import PubSub from 'pubsub-js'
// 导入时间处理的第三方库
import moment from "moment"
// 获取全局对象的实例
const appInstance = getApp();
Page({
  /**
   * 页面的初始数据
   */
  data: {
    isPlay: false, // 音乐是否在播放
    song: {},// 音乐详情对象
    musicId: "",//  音乐ID
    musicLink: "",// 音乐的播放链接
    currentTime: "00:00",// 音乐实时的播放进度
    durationTime: "00:00",// 音乐总的时长 转换之后的
    currentWidth: 0, // 进度条的实时宽度
    Jumptime: "",// 音乐总的时长 s
    Timetojumip: "00:00",// 手指拖动要跳转的时间
    judgethe: false, // 判断手指离开
    Classname: "icon-xunhuan", // 切换播放顺序的图标
  },

  /**
   * 生命周期函数--监听页面加载
   */
  // options： 接收路由跳转 query 参数
  onLoad: function (options) {
    // 初始化 index 用来做切换播放顺序
    this.indexS = 0;

    // 原生的小程序对路由传递的参数的长度有限制,如果长度过长会被自动截取掉
    // 获取过来的参数是JSON对象格式我们要把参数转换成JS对象格式
    // console.log(JSON.parse(options.song));

    let musicId = options.musicId;
    // 更新musicId的状态数据
    this.setData({
      musicId
    })
    // 获取歌曲详情
    this.getMusicInfo(musicId);

    /**
     * 问题:  如果用户操作系统的控制音乐播放/暂停的按钮,页面不知道,导致页面显示是否播放的状态和真实的音乐播放状态不一致。
     *    解决方案:
     *       1.通过控制音频的实例(backgroundAudioManager)去监视音乐的播放/暂停
     * 
     */
    // 判断当前页面音乐是否正在播放
    if (appInstance.globalData.isMusicPlay && appInstance.globalData.musicId === musicId) {
      // 修改当前页面的播放状态为true
      this.setData({
        isPlay: true
      })
    }
    // 创建控制音乐播放的实例
    this.backgroundAudioManager = wx.getBackgroundAudioManager();

    // 监视音乐的播放/暂停/停止  实现同步
    // 监视音乐的播放
    this.backgroundAudioManager.onPlay(() => {
      // 修改音乐的播放状态 和 全局音乐的播放状态
      this.changePlayState(true)
      // 修改全局音乐的播放的id
      appInstance.globalData.musicId = musicId;
    })

    // 监视音乐的暂停
    this.backgroundAudioManager.onPause(() => {
      // 修改音乐的播放状态 和 全局音乐的播放状态
      this.changePlayState(false)
    })

    // 监视音乐的停止
    this.backgroundAudioManager.onStop(() => {
      // 修改音乐的播放状态 和 全局音乐的播放状态
      this.changePlayState(false)
    })

    // 监听音乐自然播放结束
    this.backgroundAudioManager.onEnded(() => {
      this.changePlayState(false);
      let indexS = this.indexS;
      // 自动切换下一首并且自动播放 发布消息给recommendSong页面 switchType 事件名   'next'要发送的数据
      // 要切换的顺序
      switch (this.indexS) {
        case 0: PubSub.publish('switchType', { next: "next", indexS })
          break; // 顺序播放
        case 1: PubSub.publish('switchType', { next: "next", indexS, onEnded: 'onEnded' })
          break;// 单曲循环
        case 2:
          break; // 随机播放
      }

      // 发布
      // PubSub.publish('switchType', 'next')
      // 订阅来自recommendSong页面发布的Id消息
      PubSub.subscribe('musicId', (msg, musicId) => {
        // 更新歌曲信息 获取歌曲详情
        this.getMusicInfo(musicId);
        // 自动播放当前歌曲
        this.musicControl(true, musicId)
        // 取消订阅
        PubSub.unsubscribe('musicId')
      })
    })

    // 监听音乐实时播放的进度
    this.backgroundAudioManager.onTimeUpdate(() => {
      // console.log('总时长:', this.backgroundAudioManager.duration);
      // console.log('实时长:', this.backgroundAudioManager.currentTime);// 获取到的时间格式是S
      // 格式化时间实时播放的时间 moment() 函数要接收的时间格式是ms
      //   currentTime:"00:00",// 音乐实时的播放进度
      // durationTime:"00:00",// 音乐总的时长
      let currentTime = moment(this.backgroundAudioManager.currentTime * 1000).format('mm:ss');
      // 计算实时进度条的位置 => （实时的时间 / 总的时间）* 进度条的宽度
      let currentWidth = (this.backgroundAudioManager.currentTime / this.backgroundAudioManager.duration) * 450;
      if (!this.data.judgethe) {
        this.setData({
          currentTime,
          currentWidth,
        })
      }
    })
  },
  // 修改播放状态的功能函数
  changePlayState(isPlay) {
    this.setData({
      isPlay
    })
    // 修改全局音乐的播放状态
    appInstance.globalData.isMusicPlay = isPlay;
  },

  // 获取歌曲详情的功能函数
  async getMusicInfo(musicId) {
    let songData = await request('/song/detail', { ids: musicId });
    // 将歌曲的总时长转化为分钟的形式  传入moment 函数的时间单位要是ms
    let durationTime = moment(songData.songs[0].dt).format("mm:ss");

    //更新song
    this.setData({
      song: songData.songs[0],
      durationTime,
      Jumptime: songData.songs[0].dt / 1000,
    })
    // 动态设置当前页面的标题
    wx.setNavigationBarTitle({
      title: this.data.song.name
    })
    // 当进入音乐播放页面时自动播放当前歌曲
    this.musicControl(true, musicId)
  },

  // 播放/暂停 按钮的回调
  handleMusicPlay() {
    let { musicId, musicLink, isPlay } = this.data;
    // 控制音乐播放/暂停的功能函数
    this.musicControl(!isPlay, musicId, musicLink);
  },

  // 控制音乐播放/暂停的功能函数
  async musicControl(isPlay, musicId, musicLink) {
    if (isPlay) { // 音乐播放
      // 页面优化减少http请求次数
      if (!musicLink) {
        //获取音乐播放的链接
        let musicLinkData = await request('/song/url', { id: musicId })
        musicLink = musicLinkData.data[0].url;
        // 更新musicLink的状态数据
        this.setData({
          musicLink
        })
      }
      // 播放音乐
      this.backgroundAudioManager.src = musicLink
      // 音乐标题(必填)
      this.backgroundAudioManager.title = this.data.song.name;

      if (this.data.judgethe) {
        let { Timetojumip } = this.data;
        // 跳转到音频指定的位置
        this.backgroundAudioManager.seek(Timetojumip - 1)
        this.setData({
          judgethe: false
        })
      }

    } else { // 音乐暂停
      this.backgroundAudioManager.pause()
    }
  },

  // 点击切歌的回调
  handleSwitch(event) {
    // 切换播放顺序
    if (event.currentTarget.dataset.relaysequence) {
      this.indexS += 1;
      if (this.indexS > 2) {
        this.indexS = 0;
      }
      // 0 顺序播放  1 单曲循环 2 随机播放
      let Classname
      switch (this.indexS) {
        case 0: Classname = 'icon-xunhuan';
          wx.showToast({
            title: '顺序播放',
          })
          break;
        case 1: Classname = 'icon-hanhan-01-011';
          wx.showToast({
            title: '单曲循环',
          })
          break;
        case 2: Classname = 'icon-hanhan-01-01';
          wx.showToast({
            title: '随机播放',
          })
          break;
      }
      this.setData({
        Classname
      })
    }

    if (event.currentTarget.id) {
      let type = event.currentTarget.id;
      // 关闭当前播放的音乐
      this.backgroundAudioManager.pause()
      // 订阅来自recommendSong页面发布的Id消息
      PubSub.subscribe('musicId', (msg, musicId) => {
        // 更新歌曲信息 获取歌曲详情
        this.getMusicInfo(musicId);
        // 自动播放当前歌曲
        this.musicControl(true, musicId)
        // 取消订阅 作用:每次订阅完都会有一个订阅的对象,不取消上一个的话会越积越多,两个页面进行通信只要有一边取消就行
        PubSub.unsubscribe('musicId')
      })
      // 切换歌曲方式的 序号
      let indexS = this.indexS;
      //  发布消息给recommendSong页面 switchType 事件名  type 要发送的数据
      PubSub.publish('switchType', { type, indexS })
    }
  },

  // 手指拖动进度条时的回调  offsetLeft
  audioCurrentTimEBaRcontrol(event) {
    // 手指拖动要移动的距离  X轴拖动的有效范围是 76 - 300px
    let currentWidth = (event.touches[0].clientX - 76) * 2;
    if (currentWidth >= 0 && currentWidth < 450) {
      let { Jumptime } = this.data;
      // 要跳转的时间
      let durationTime = (currentWidth / 450) * (Jumptime + 0.4);
      let currentTime = moment(durationTime * 1000).format('mm:ss');
      this.setData({
        currentWidth,
        Timetojumip: durationTime,
        currentTime,
        judgethe: true
      })

    }
  },
  // 手指离开更新播放时间
  Updatemusictime() {
    let { musicId, musicLink } = this.data;
    // 更新播放时间
    this.musicControl(true, musicId, musicLink);
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})